{% extends "base.html" %}

{% block title %}
Busca de Aulas
{% endblock title %}

{% block extrahead %}
$(function() {
		$('#botao_busca').addClass('active');
        $( "#id_data" ).datepicker({
			changeMonth: true,
			changeYear: true,
                        dateFormat: 'dd/mm/yy',
                        yearRange: '2009:{{ano_now.year}}'
		});
		$('#id_aluno').autocomplete([{% for aluno in lista_alunos %}"{{aluno.nome}}",{% endfor %}], {
			highlight: false,
			scroll: true,
			scrollHeight: 300
		});
		$('#id_professor').autocomplete([{% for professor in lista_professores %}"{{professor.detalheusuario.nome}}",{% endfor %}], {
			highlight: false,
			scroll: true,
			scrollHeight: 300
		});
		$('#id_unidade').autocomplete([{% for unidade in lista_unidades %}"{{unidade.nome}}",{% endfor %}], {
			highlight: false,
			scroll: true,
			scrollHeight: 300
		});
		$('#id_local').autocomplete([{% for local in lista_locais %}"{{local.nome}}",{% endfor %}], {
			highlight: false,
			scroll: true,
			scrollHeight: 300
		});
		$("#id_inicio, #id_fim").timePicker();
		var oldTime = $.timePicker("#id_inicio").getTime();
		$("#id_inicio").change(function() {
		  if ($("#id_fim").val()) { // Only update when second input has a value.
			// Calculate duration.
			var duration = ($.timePicker("#id_fim").getTime() - oldTime);
			var time = $.timePicker("#id_inicio").getTime();
			// Calculate and update the time in the second input.
			$.timePicker("#id_fim").setTime(new Date(new Date(time.getTime() + duration)));
			oldTime = time;
		  }
		});
		// Validate.
		$("#id_fim").change(function() {
		  if($.timePicker("#id_inicio").getTime() > $.timePicker(this).getTime()) {
			$(this).addClass("error");
		  }
		  else {
			$(this).removeClass("error");
		  }
		});
		$("#id_aluno, #id_professor, #id_local, #id_data, #id_unidade").attr('size', 23);

	});

{% endblock extrahead %}

{% block content %}

		<div class="box-header clear">
			<h2>Busca de Aulas</h2>
		</div>
	<div class="box-wrap clear">
		{% if messages %}
			<ul class="messages">
			  {% for message in messages %}
				<div class="notification note-{{ message.tags }}">
					<a href="#" class="close" title="Close notification">close</a>
					<p><strong>Notificação do Sistema:</strong> {{ message }}</p>
				</div>
			{% endfor %}
			</ul>
			{% endif %}

		<form action="/resultado_busca_aula/" method="get" class="validate-form form bt-space15" onSubmit="return confirm('Você deseja realmente enviar esses dados?');" >
			<div class="columns clear bt-space15">
				<div class="col2-3">
					<table>
						
						{% for field in busca_form %}
							<tr> <th>{{ field.label_tag }}: </th><td>{{ field }}
							{{ field.errors }}</td></tr>
						{% endfor %}
							<tr> <th>Intervalo de Tempo: </th><td><input type="text" name="inicio" id="id_inicio" size="8" class="fl-space2"><input type="text" name="fim" id="id_fim" size="8"></td></tr>
					</table>
				</div>
				
			</div>
			<input type="submit" class="button green size-120 fl" value="Buscar Aulas" />
		</form>
	</div><!-- end of box-wrap -->

{% endblock content %}
